<template>
  <div class="did-h">
    <div class="black black-h">
      <div>通过CPT ID查询凭证模板CPT。</div>
      <el-row :gutter="20" class="mt3">
        <el-col :span="10" :offset="6">
          <el-form label-position="right" :rules="rules" ref="ruleForm" label-width="140px" :model="form">
            <el-form-item label="凭证模板CPT ID" prop="cptId">
              <el-input v-model="form.cptId" placeholder="请输入凭证模板CPT ID"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div class="did-button">
        <el-button size="medium" type="primary" @click="querying">查询凭证模板CPT</el-button>
      </div>
    </div>
    <div class="black mt1 black-height">
          <ul>
            <li class="publicKey">
              <span class="span">发布者DID：</span>
              <span class="span-key">{{ data.publisher }}</span>
            </li>
            <li class="publicKey">
              <span class="span">CPT标题：</span>
              <span class="span-key">{{ data.title }}</span>
            </li>
            <li class="publicKey">
              <span class="span">CPT描述：</span>
              <span class="span-key">{{ data.des }}</span>
            </li>
            <li class="publicKey">
              <span class="span">CPT声明数据</span>
            </li>
            <li>
              <span class="span-key">
                <el-table :data="claim" style="width: 100%">
                     <el-table-column prop="name" label="字段名"></el-table-column>
                     <el-table-column prop="value" label="描述" ></el-table-column>
                </el-table>
              </span>
            </li>
            <li class="publicKey">
              <span class="span">交易哈希：</span>
              <span class="span-key">{{ data.txHash }}</span>
            </li>
            <li class="publicKey">
              <span class="span">区块高度：</span>
              <span class="span-key">{{ data.blockHeight }}</span>
            </li>
          </ul>
      <!-- <NoData class="nodata" /> -->
    </div>
  </div>
</template>
<script>
import NoData from '../../../components/noData.vue';
export default {
  components: {
    NoData,
  },
  data() {
    return {
      activeName: 'first',
      form: {
        cptId: '',
      },
      rules: {
        cptId: [{ required: true, message: '请输入CPT模板ID', trigger: 'blur' }],
      },
      tableData: [{ name: '', type: '', describe: '' }],
      data: {
        publisher:'',
        title:'',
        des: '',
        claim:'',
        createdAt:'',
        txHash:'',
        blockHeight:''
      },
      claim:[]
    };
  },
  mounted() {},
  methods: {
    querying() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.queryingCpt();
        } else {
          return false;
        }
      });
    },
    addClick(){
      let arr = [{ name: '', type: '', describe: '' }]
      this.tableData.push(arr);
    },
    delClick(index){
      this.tableData.splice(index,1)
    },
    async queryingCpt(){
      let params = {
        ...this.form
      }
      let res = await this.$http.post(this.$api.cpt.queryingCpt, params);
      if (res.code == 200) {
        let att = [];
        let arr = JSON.parse(res.data.claim)
        this.data = res.data;
        for (const resKey in arr) {
          att.push({
            name:resKey,
            value:arr[resKey]
          })
        }
        this.claim = att;
      }
    }
  },
};
</script>
<style lang="less" scoped>
.did-content {
  margin-top: 10%;
  h1 {
    color: #666666;
    width: 320px;
    margin: 0 auto;
  }
}
.did-button {
  width: 100px;
  margin: 0 auto;
  margin-top: 20px;
}
.m-a0 {
  margin: 0 auto;
}
.black-h {
  height: 50%;
  overflow-y: auto;
}
.black-height {
  height: calc(50% - 90px);
  overflow-y: auto;
}
.black-height ul{
  width: 80%;
  margin: 0 auto;
}
.nodata {
  margin-top: 10%;
}
.did-width {
  width: 500px;
  margin: 0 auto;
}
.text-c {
  text-align: center;
}
.add-button{
  width: 100%;
  padding:8px 0 ;
  background: #FCA400;
  color: white;
  border: 1px dashed #ccc;
  text-align: center;
  border-radius: 3px;
  margin-top: 10px;
  cursor: pointer;
}
.cursor{
  cursor: pointer;
}
.publicKey {
  display: flex;
  line-height: 30px;
  .span {
    width: 120px;
  }
  .span-key {
    width: calc(100% - 120px);
    word-break: break-word;
    white-space: pre-line;
  }
}
</style>
